﻿<Card Class="account-details-root">
    <form
        autoComplete="off"
        noValidate>
        <CardHeader
            Subheader="The information can be edited"
            Title="Profile" />
        <Divider />
        <CardContent>
            <Grid
                Container
                Spacing="@Spacing.Three">
                <Grid
                    Item
                    Medium="@GridSize.Six"
                    ExtraSmall="@GridSize.Twelve">
                    <TextField
                        FullWidth
                        Helper="Please specify the first name"
                        Label="First name"
                        Margin="@Margin.Dense"
                        Name="FirstName"
                        Required="true"
                        Value="@User.FirstName"
                        Variant="@TextFieldVariant.Outlined" />
                </Grid>
                <Grid
                    Item
                    Medium="@GridSize.Six"
                    ExtraSmall="@GridSize.Twelve">
                    <TextField
                        FullWidth
                        Helper="Please specify the last name"
                        Label="Last name"
                        Margin="@Margin.Dense"
                        Name="LastName"
                        Required="true"
                        Value="@User.LastName"
                        Variant="@TextFieldVariant.Outlined" />
                </Grid>
                <Grid
                    Item
                    Medium="@GridSize.Six"
                    ExtraSmall="@GridSize.Twelve">
                    <TextField
                        FullWidth
                        Helper="Please specify the email"
                        Label="Email Address"
                        Margin="@Margin.Dense"
                        Name="Email"
                        Required="true"
                        Value="@User.Email"
                        Variant="@TextFieldVariant.Outlined" />
                </Grid>
                <Grid
                    Item
                    Medium="@GridSize.Six"
                    ExtraSmall="@GridSize.Twelve">
                    <TextField
                        FullWidth
                        Label="Phone Number"
                        Margin="@Margin.Dense"
                        Name="Phone"
                        Required="true"
                        Type="number"
                        Value="@User.Phone"
                        Variant="@TextFieldVariant.Outlined" />
                </Grid>
                <Grid
                    Item
                    Medium="@GridSize.Six"
                    ExtraSmall="@GridSize.Twelve">
                    <TextField
                        FullWidth
                        Helper="Please specify the state"
                        Label="State"
                        Margin="@Margin.Dense"
                        Name="State"
                        Required="true"
                        Value="@User.State"
                        Variant="@TextFieldVariant.Outlined" />
                </Grid>
                <Grid
                    Item
                    Medium="@GridSize.Six"
                    ExtraSmall="@GridSize.Twelve">
                    <TextField
                        FullWidth
                        Helper="Please specify the country"
                        Label="Country"
                        Margin="@Margin.Dense"
                        Name="Country"
                        Required="true"
                        Value="@User.Country"
                        Variant="@TextFieldVariant.Outlined" />
                </Grid>
            </Grid>
        </CardContent>
        <Divider />
        <CardActions>
            <Button
                Color="@Color.Primary"
                Variant="@ButtonVariant.Contained">
                Save details
            </Button>
        </CardActions>
    </form>
</Card>

@code
{
    private (string FirstName, string LastName, string Email, string Phone, string State, string Country) User = (
        FirstName: "Shen",
        LastName: "Zhi",
        Email: "shen.zhi@devias.io",
        Phone: "",
        State: "Alabama",
        Country: "USA"
    );
}
